<!doctype html>
<html>
<head>
    <script src="../js/jquery-1.7.1.min.js"></script>
    <script src='../js/layer/2.1/layer.js'></script>
    <link href="../css/css.css" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no" />
    <title>无标题文档</title>
    <style>
        .money{ width:97px; height:97px; background-color:#ff7f00; border-radius:50%; margin-left:auto; margin-right:auto; padding-top:19px; box-sizing:border-box;}
        .money h1{ line-height:24px; color:#fff; font-size:14px; text-align:center}
        .money p{ line-height:28px; color:#fff; font-size:23px; text-align:center}
        .help{ position:absolute; right:4%; top:14px; border:1px solid #EA2320; width:16px; height:16px; border-radius:50%; line-height:16px; text-align:center; color:#EA2320; margin-right:62px}
        .help_nav{position:absolute; right:4%; top:14px; line-height:16px; text-align:center; color:#65646A;}
        /*余额明细*/
        .detail_title{ width:21%; height:39px; line-height:39px; text-align:center; margin-left:auto; margin-right:auto; position:relative; color:#65646b; font-size:14px;}
        .detail_title .border_top{ width:100px; top:19px;}
        .detail{ height:60px; position:relative; background-color:#fff; padding-left:4%; padding-top:8px; box-sizing:border-box;color: #01aff0}
        .detail h1{ line-height:23px; font-size:14px; color:#01aff0;}
        .detail h2{ line-height:19px; font-size:12px; color:#01aff0;}
        .detail p{ line-height:60px; position:absolute;left:50%; top:0; color:#01aff0; font-size:16px;}
        .detail .p1{left:55%; }
        .detail .p2{left:65%; text-align: right }
        .detail .p3{left:85%; }
    </style>
</head>
<body style="background-color:#f9f9f9;">
<!--header顶部标题-->
<div class="header">我的奖章
    <div class="header_left" onClick="window.history.go(-1)"><img src="../images/return.png"></div>
</div>
<!--积分-->
<div style="background-color:#fff; position:relative; padding-top:28px; padding-bottom:36px;">
    <div class="money">
        <h1>我的奖章</h1>
        <p id="number">0</p>
    </div>
    <div class="border_bottom"></div>
</div>
<!--余额明细-->
<div class="detail_title">奖章详情
    <div class="border_top" style="left:-100px;"></div>
    <div class="border_top" style="left:inherit; right:-100px;"></div>
</div>

<div id="details">

</div>


<div style=" height:1px; margin-bottom:60px;"></div>
<!--按钮-->
<!--<div class="confirm_box" style="background-color: #fff">-->
    <!--<div class="confirm" style="background-color:#01aff0;">我要兑换</div>-->
<!--</div>-->
<script type="text/javascript" src="../script/config.js"></script>
<script>
    //点击成为会员
    $(".confirm").click(function(){
        window.location.href ="change.html";
    });
    $.ajax({
        type: 'GET',
        url: urls+'/medalRecord/findByUserOfMedalRecordCount',
        contentType: "application/json",
        success: function(req){
            console.log(req);
            $("#number").html(req);
        },
        error:function(){
            layer.msg("请求失败");
        }

    });
    $.ajax({
        type: 'POST',
        url: urls+'/medalRecord/findMedalRecord',
        contentType: "application/json",
        success: function(req){
            console.log(req);
            if(req.length>0){
                var strs="";

                for(var i=req.length-1;i>=0;i--){
                    if(req[i].useType==1){
                        strs = strs+ '<div class="detail"> ' +
                                '<div class="touxiang"></div> ' +
                                '<h1>增加</h1>'+
                                '<h2>'+req[i].duihuanTime.substr(0,10)+'&nbsp;&nbsp;&nbsp;&nbsp;'+req[i].duihuanTime.substr(10)+'</h2>'+
                                '<p class="p1">+&nbsp;&nbsp;</p>'+
                                '<p class="p2">'+req[i].count+'</p>'+
                                '<p class="p3">'+req[i].medalCount+'</p>'+
                                '<div class="border_bottom"></div>'+
                                '</div>'
                    }else {
                        strs = strs+ '<div class="detail"> ' +
                                '<div class="touxiang"></div> ' +
                                '<h1>消费</h1>'+
                                '<h2>'+req[i].duihuanTime.substr(0,10)+'&nbsp;&nbsp;&nbsp;&nbsp;'+req[i].duihuanTime.substr(10)+'</h2>'+
                                '<p class="p1">-&nbsp;&nbsp;</p>'+
                                '<p class="p2">'+req[i].count+'</p>'+
                                '<p class="p3">'+req[i].medalCount+'</p>'+
                                '<div class="border_bottom"></div>'+
                                '</div>'
                    }
//                    console.log(req[i]);
//                    console.log(req[i].medalCount);

                }
                $("#details").append(strs);
            }
        },
        error:function(){
            layer.msg("请求失败");
        }

    });
    //消费记录列表
</script>
</body>
</html>
